<template>
  <el-dialog
    :title="title"
    :visible.sync="visible"
    :before-close="closeDialog"
    :close-on-click-modal="false"
    width="40%"
    top="5vh"
  >
    <el-form
      ref="createOrEditForm"
      v-loading="loading"
      label-position="left"
      label-width="130px"
      :model="form"
    >
      <el-form-item :label="$t('BookStore2[\'Display:Cleanliness\']')" prop="cleanliness">
        <el-radio-group v-model="form.cleanliness">
          <el-radio v-for="item in dataDict.VehicleCleanliness" :key="item.key" :label="item.key">{{ $t('BookStore2[\'' + item.key + '\']') }}</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item :label="$t('BookStore2[\'Display:TirePressure\']')" prop="tirePressure">
        <el-radio-group v-model="form.tirePressure">
          <el-radio v-for="item in dataDict.VehicleTirePressure" :key="item.key" :label="item.key">{{ $t('BookStore2[\'' + item.key + '\']') }}</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item :label="$t('BookStore2[\'Display:RemainFuel\']')" prop="remainFuel">
        <el-radio-group v-model="form.remainFuel">
          <el-radio v-for="item in dataDict.VehicleRemainFuel" :key="item.key" :label="item.key">{{ $t('BookStore2[\'' + item.key + '\']') }}</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item :label="$t('BookStore2[\'Display:EngineLight\']')" prop="engineLight">
        <el-radio-group v-model="form.engineLight">
          <el-radio v-for="item in dataDict.VehicleEngineLight" :key="item.key" :label="item.key">{{ $t('BookStore2[\'' + item.key + '\']') }}</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item :label="$t('BookStore2[\'Display:WindshieldFluid\']')" prop="windshieldFluid">
        <el-radio-group v-model="form.windshieldFluid">
          <el-radio v-for="item in dataDict.VehicleWindshieldFluid" :key="item.key" :label="item.key">{{ $t('BookStore2[\'' + item.key + '\']') }}</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item :label="$t('BookStore2[\'Display:CurrentKilometers\']')" prop="currentKilometers">
        <el-input v-model="form.currentKilometers">
          <template slot="append">KM</template>
        </el-input>
      </el-form-item>
      <el-form-item :label="$t('BookStore2[\'Display:Remark\']')" prop="remark">
        <el-input v-model="form.remark" />
      </el-form-item>
      <el-form-item :label="$t('BookStore2[\'Display:AttachFiles\']')" prop="attachFiles">
        <attach-file-upload ref="upload" :attach-files="form.attachFiles"></attach-file-upload>
      </el-form-item>
      <!-- 隐藏表单 -->
      <el-form-item prop="id" hidden>
        <el-input v-model="form.id" />
      </el-form-item>
      <el-form-item prop="vehicleId" hidden>
        <el-input v-model="form.vehicleId" />
      </el-form-item>
      <el-form-item prop="concurrencyStamp" hidden>
        <el-input v-model="form.concurrencyStamp" />
      </el-form-item>
    </el-form>
    <span slot="footer" class="dialog-footer">
      <el-button @click="closeDialog">{{ $t('BookStore2[\'Cancel\']') }}</el-button>
      <el-button type="primary" @click="submitForm">
        <i class="el-icon-check" />
        {{ $t('BookStore2[\'Save\']') }}
      </el-button>
    </span>
  </el-dialog>
</template>

<script>
import {
  getById,
  create,
  edit
} from '@/api/vehicle/vehicleInspectionRecord'
import { getDataDict } from '@/api/data-dict/data-dict'
import AttachFileUpload from '@/views/components/attach-file-upload'
export default {
  name: 'CreateOrEditVehicle',
  components: { AttachFileUpload },
  props: {
    context: {
      type: Object,
      required: true
    },
    visible: {
      type: Boolean,
      required: true,
      default: false
    }
  },
  data() {
    return {
      title: '',
      actionMode: '',
      loading: false,
      dataDict: {},
      form: {
        id: '',
        vehicleId: '',
        concurrencyStamp: '',
        cleanliness: 'Enum:VehicleCleanliness.YES',
        tirePressure: 'Enum:VehicleTirePressure.Good',
        remainFuel: 'Enum:VehicleRemainFuel.Over50',
        engineLight: 'Enum:VehicleEngineLight.YES',
        windshieldFluid: 'Enum:VehicleWindshieldFluid.Full',
        remark: '',
        currentKilometers: 0,
        attachFiles: []
      },
      formRules: {
        // number: [{ required: true, message: this.$t('BookStore2[\'ThisFieldIsRequired\']'), trigger: 'blur' }],
      }
    }
  },
  watch: {
    context(newVal, oldVal) {
      this.loading = true
      this.title = newVal.title
      this.actionMode = newVal.actionMode
      this.$nextTick(function() {
        if (this.actionMode === 'edit') {
          /* 编辑模式 */
          if (newVal.id) {
            getById(newVal.id).then(resp => {
              const vehicle = resp
              if (vehicle) {
                this.form.id = vehicle.id
                this.form.concurrencyStamp = vehicle.concurrencyStamp
                this.form.cleanliness = vehicle.cleanliness
                this.form.tirePressure = vehicle.tirePressure
                this.form.remainFuel = vehicle.remainFuel
                this.form.engineLight = vehicle.engineLight
                this.form.windshieldFluid = vehicle.windshieldFluid
                this.form.remark = vehicle.remark
                this.form.currentKilometers = vehicle.currentKilometers
                this.form.attachFiles = resp.attachFiles
              }
              this.loading = false
            })
          }
        } else {
          /* 创建模式 */
          this.form.vehicleId = newVal.vehicleId
          this.loading = false
        }
      })
    }
  },
  async created() {
    this.dataDict = await getDataDict([
      'VehicleCleanliness',
      'VehicleTirePressure',
      'VehicleRemainFuel',
      'VehicleEngineLight',
      'VehicleWindshieldFluid'
    ])
  },
  methods: {
    submitForm() {
      this.$refs.createOrEditForm.validate(async(isValid, invalidFields) => {
        if (isValid) {
          this.form.attachFiles = this.$refs.upload.getAttachFiles()
          if (this.actionMode === 'edit') {
            await edit(this.form.id, this.form)
          } else {
            await create(this.form)
          }
          this.$message({ message: this.$t('BookStore2[\'Ok\']'), type: 'success' })
          this.closeDialog()
          this.$emit('saveSucceed')
        }
      })
    },
    closeDialog() {
      this.resetDialog() // 重置表单
      this.$emit('update:visible', false)
    },
    resetDialog() {
      this.$refs.createOrEditForm.resetFields()
      // console.log(this.form)
    }
  }
}
</script>

<style scoped>
</style>
